<template>
  <div class="app-container">
    <h2 style="text-align: center;">提交材料</h2>
    <!-- <strong>添加讲师</strong> -->
    <el-form label-width="120px">

      <el-form-item label="成果名称" prop="name" style="width: 350px;">
        <el-input v-model="material.designation" clearable placeholder="请如实填写"></el-input>
      </el-form-item>

      <el-form-item label="提交类别" >
        <el-select v-model="material.bus" clearable placeholder="提交类别">
          <el-option
            v-for="bus in busOne"
            :key="bus.id"
            :label="bus.bus"
            :value="bus.id"
          />
        </el-select>
      </el-form-item>

      <!--      <input type="file" ref="fileInput" @change="getFileName">-->

      <el-form-item label="上传文件" >
        <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
          :multiple="false">
          <el-button slot="trigger" size="small" type="primary" @click="submitUpload">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveTeacher()">提交</el-button>
      </el-form-item>

      <!-- TODO -->

    </el-form>
  </div>
</template>

<script>
// import teacher from '@/api/adm/teacherAdmin'
import * as teacher from '@/api/edu/eduTeacher'
import { disable, disableTeacher, getInfoTeacher } from '@/api/adm/teacherAdmin'

export default {
  data() {
    return {
      // 前端对象的一个封装 ，用上面的值进行一个双向绑定
      material:{
        jobNumber:'', // 教师工号
        name:'', // 教师姓名
        designation:'', // 成果名称
        bus:'', // 提交类别
        busId:'',
        actCategory:'', // 活动类别
        materials:'' // 支撑材料，文件名称
      },
      fileList:[],
      busOne:[], //装后端提交过来的活动类别
      saveBtnDisabled:false  // 提交按钮是否禁用,
    }
  },
  created() {
    this.getBus()
  },
  methods: {
    // 提交类别回显
    getBus(){
      teacher.getBus().then(response => {
        this.busOne = response.data.list
      })
    },

    //文件的上传
    getFileName() {
      // 先获取提交的文件名称，传到后端直接把文件名称了啥的给兑上即可
      const file = this.$refs.fileInput.files[0]
      const fileName = file.name
      console.log(fileName)
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    //添加教师信息
    saveTeacher(){
      // teacher.addTeacher(this.teacher).then(response => {
      //   //添加成功
      //   this.$message({
      //     message: "添加成功",
      //     type: 'success'
      //   });
      //   this.teacher = null;
      //   this.$router.push({path:'/adminTeacher/list'});
      // }).catch(error => {
      //   // 请求失败
      //   console.error(error);
      // });
    },
  }
}
</script>

